<script setup lang="ts">
import CPE1 from '@/assets/images/sdwan/design/CPE1.png';
import SDWAN from '@/assets/images/sdwan/design/SDWAN.png';

interface AdvantageData {
  iconClass: string;
  title: string;
  comment: string;
}
const advantageList: AdvantageData[] = [
  {
    iconClass: 'icon-earth-full',
    title: '可实现IP分流',
    comment:
      '①优化网络性能；<br/>②提高带宽利用率；<br/>③增强网络安全；<br/>④提高灵活性和可扩展性',
  },
  {
    iconClass: 'icon-lianjie',
    title: '整合定制能力',
    comment:
      '①可针对企业需求定制；<br/>②出色的多平台整合能力；<br/>③拥有丰富的资源，可实现短时间灵活整合匹配企业需求；',
  },
  {
    iconClass: 'icon-ziyuan',
    title: '智能自动选路',
    comment:
      '①可实现实时的链路选择；<br/>②提高了容错性和可靠性；<br/>③成本得到很好的优化；',
  },
];

interface SDWanData {
  iconClass: string;
  title: string;
}

const sdwanLeftList: SDWanData[] = [
  {
    iconClass: 'icon-qiyefenzhi',
    title: '企业分部',
  },
  {
    iconClass: 'icon-mendianguanli',
    title: '门店店铺',
  },
  {
    iconClass: 'icon-shouji',
    title: '移动设备',
  },
];

const sdwanRightList: SDWanData[] = [
  {
    iconClass: 'icon-IDCshujuzhongxin',
    title: 'IDC数据中心',
  },
  {
    iconClass: 'icon-a-gongyouyun5',
    title: '公有云/SaaS平台',
  },
  {
    iconClass: 'icon-qiyezongbu',
    title: '企业总部',
  },
];
</script>

<template>
  <div class="sdwan-advantage">
    <div class="container">
      <div class="advantageBox">
        <div class="box" v-for="item in advantageList" :key="item.title">
          <div class="titleBox">
            <div class="iconBorder">
              <i :class="`iconfont ${item.iconClass}`"></i>
            </div>

            <div class="title">{{ item.title }}</div>
          </div>
          <div class="comment">
            <span v-html="item.comment"></span>
          </div>
        </div>
      </div>
      <div class="advantageBottom">
        <!-- 最左侧 -->
        <div class="box">
          <div class="content" v-for="item in sdwanLeftList" :key="item.title">
            <div class="iconBox">
              <svg
                v-if="item.iconClass === 'icon-mendianguanli'"
                class="svgIcon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-mendianguanli"></use>
              </svg>
              <i v-else :class="`iconfont ${item.iconClass}`"></i>
            </div>
            <div class="line"></div>
            <img v-lazy="CPE1" alt="" />
          </div>
        </div>
        <!-- 中间左三条线 -->
        <div class="middleLeftLineBox">
          <div class="line line_1"></div>
          <div class="line line_2"></div>
          <div class="line line_3"></div>
        </div>
        <!-- 中间logo -->
        <div class="sdwanLogo">
          <img v-lazy="SDWAN" alt="" />
          <div class="title">
            <span>“云桥通”</span>
            <p>智能SD-WAN平台</p>
          </div>
        </div>

        <!-- 中间右三条线 -->
        <div class="middleRightLineBox">
          <div class="line line_1"></div>
          <div class="line line_2"></div>
          <div class="line line_3"></div>
        </div>
        <!-- 最右侧 -->
        <div class="box">
          <div class="content" v-for="item in sdwanRightList" :key="item.title">
            <img v-lazy="CPE1" alt="" />
            <div class="line"></div>
            <div class="iconBox">
              <i :class="`iconfont ${item.iconClass}`"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sdwan-advantage {
  width: 100%;
  padding-bottom: 200px;
  background: linear-gradient(to right, #f2f6f7, #eef3f8);
  .advantageBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .box {
      margin-top: -38px;
      width: 380px;
      height: 220px;
      border: 2px solid #63acdf;
      border-radius: 0 0 25px 25px;
      .titleBox {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        background-image: linear-gradient(
          -90deg,
          #89f7fe 0%,
          #78cfff 34%,
          #66a6ff 100%
        );
        .iconBorder {
          width: 40px;
          height: 40px;
          margin: 0 10px;
          padding: 2px 0 0 1px;
          border: 1px solid #fbfcfd;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            color: #fbfcfd;
            font-size: 28px;
          }
        }

        .title {
          font-family: 'SourceHanSansCN-Regular';
          font-size: 28px;
          color: #fbfcfd;
        }
      }
      .comment {
        padding: 14px 20px 20px 20px;
        span {
          font-family: 'SourceHanSansCN-Regular';
          font-size: 16px;
          line-height: 1.8;
          color: #38393a;
        }
      }
    }
  }

  .advantageBottom {
    margin-top: 200px;
    padding-bottom: 100px;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
      width: 200px;
      height: 325px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      .content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconBox {
          .svgIcon {
            width: 68px;
            height: 68px;
          }
          .iconfont {
            color: #1296db;
            font-size: 70px;
          }
        }
        .line {
          height: 3px;
          width: 50px;
          border: 2px solid #0d6fb8;
          border-radius: 2px;
        }
      }
    }

    .middleLeftLineBox {
      width: 200px;
      height: 325px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      .line {
        height: 3px;
        width: 250px;
        border: 2px solid #0d6fb8;
        border-radius: 2px;
      }
      .line_1 {
        width: 260px;
        margin-top: 50px;
        margin-left: 8px;
        transform-origin: left bottom;
        transform: rotate(15deg);
      }
      .line_3 {
        width: 260px;
        margin-bottom: 50px;
        margin-left: 8px;
        transform-origin: left bottom;
        transform: rotate(-15deg);
      }
    }

    .middleRightLineBox {
      width: 200px;
      height: 325px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      .line {
        height: 3px;
        width: 250px;
        border: 2px solid #0d6fb8;
        border-radius: 2px;
      }
      .line_1 {
        width: 260px;
        margin-top: 50px;
        margin-right: 8px;
        transform-origin: right bottom;
        transform: rotate(-15deg);
      }
      .line_3 {
        width: 260px;
        margin-bottom: 50px;
        margin-right: 8px;
        transform-origin: right bottom;
        transform: rotate(15deg);
      }
    }

    .sdwanLogo {
      text-align: center;
      .title {
        font-family: 'SourceHanSansCN-Bold';
        font-weight: 700;
        font-size: 30px;
        line-height: 40px;
        color: #3c3b94;
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
    .advantageBox {
      .box {
        margin: 0 10px;
      }
    }
  }
}

// lg(992px)至xl(1200px)
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .advantageBox {
      .box {
        margin: 0 10px;
      }
    }
  }
}
// 0px 至lg(992px)
@media screen and (min-width: 577px) and (max-width: 992px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .advantageBox {
      justify-content: center;
      flex-wrap: wrap;
      .box {
        margin: 10px;
      }
    }
    .advantageBottom {
      .middleLeftLineBox {
        display: none;
      }
      .middleRightLineBox {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 20px;
    .advantageBox {
      justify-content: center;
      flex-wrap: wrap;
      .box {
        margin: 10px;
      }
    }
    .advantageBottom {
      .middleLeftLineBox {
        display: none;
      }
      .middleRightLineBox {
        display: none;
      }

      .sdwanLogo {
        .title {
          display: none;
        }
      }
    }
  }
}
</style>
